<template>
    <div class="setpass">
        <van-nav-bar left-arrow :border="false" @click-left="router.go(-1)"></van-nav-bar>
        <loginTitle>
            <template #title>设置密码</template>
            <template #text>设置您的登录密码</template>
        </loginTitle>
        <div class="userinfo" v-if="mailbox.email">
            <input type="file" class="upload" @change="onUpload">
            <img :src="mailbox.img" alt="">
            <div>
                <p style="font-size: 1.3rem; margin-bottom: 0.8rem;">{{ mailbox.username }}</p>
                <span class="userinfo-info">{{ mailbox.email }}</span>
            </div>
        </div>
        <van-form @submit="onSubmit" style="margin-top: 3.5rem;">
            <van-cell-group inset>
                <van-field left-icon="lock" :right-icon="mypass ? 'closed-eye' : 'eye-o'" v-model="usernames.pass"
                    :type="mypass ? 'password' : 'text'" name="pass" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,6}/, message: '需3-6个字符' }]"
                    @click-right-icon="onclick" />
                <van-field left-icon="lock" :right-icon="mypass1 ? 'closed-eye' : 'eye-o'" v-model="usernames.newpass"
                    :type="mypass1 ? 'password' : 'text'" name="newpass" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,6}/, message: '需3-6个字符' }]"
                    @click-right-icon="onclick1" @update:model-value="onmodelpass" />
                <p class="myflxe2">{{ newPass }}</p>
            </van-cell-group>
            <div style="margin: 4.5rem 0 2rem 0; text-align: center;">
                <van-button type="primary" size="large" native-type="submit"
                    color="linear-gradient(to right, #e9837a, #7536f9)">
                    注册
                </van-button>
            </div>
        </van-form>
        <loginText>
            <template #myregister><span style="color: red;" @click="router.push('/login')">去登录</span></template>
            <template #mylogin>有一个账号？</template>
        </loginText>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import loginTitle from '@/components/loginTitle.vue';
import loginText from "@/components/loginText.vue";
import { ref } from 'vue';
import { setuserpass } from '@/apis/index';
import { showDialog } from 'vant';
import { loginData } from '@/types/index';
import { useUserLogin } from '@/store/useLogin/index';
import { storeToRefs } from 'pinia';
import { getRegisterAccountpass, updateImg } from '../../../apis/index';
let useLogin = useUserLogin()
let { mailbox, flag } = storeToRefs(useLogin);
const newPass = ref('')
const usernames = ref({
    newpass: '',
    pass: '',
});
// 密码隐藏显示
let mypass = ref(true);
let mypass1 = ref(true);
// 注册按钮
const onSubmit = async (values: any) => {
    if (values.newpass != values.pass) {
        newPass.value = '密码不一致'
    } else {
        let res = flag.value ? await getRegisterAccountpass({ ...mailbox.value, password: usernames.value.pass }) as loginData : await setuserpass({ email: mailbox.value.email, password: values.pass }) as loginData
        if (res.code == 200) {
            showDialog({
                message: res.msg,
            }).then(() => {
                router.push('/login')
            });
        }
    }
};
// 头像
const onUpload = async (e: any) => {
    // console.log(e.target.files);
    let file = e.target.files[0]
    // 上传之前要处理一下文件 因为文件是二进制的，要利用 FormData 实例对象进行处理
    const formData = new FormData();
    // append方法把文件添加到 FormData实例对象中 第一个参数：文件名 第二个参数：要上传的文件
    formData.append("file", file);
    let res = await updateImg(formData) as loginData
    console.log(res);
    
    if (res.code === 200) {
        useLogin.setuploadImg(res.data.url)
    }

}
// 输入框改变事件
let onmodelpass = () => newPass.value = '';
// 点击眼睛事件
let onclick = () => mypass.value = !mypass.value;
let onclick1 = () => mypass1.value = !mypass1.value;
</script>

<style lang="scss" scoped>
.setpass {
    height: 100%;
    width: 100%;

    .upload {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 50%;
        position: fixed;
        top: 18rem;
        left: 3rem;
        opacity: 0;
    }

    .userinfo {
        display: flex;
        align-items: end;
        height: 8rem;

        img {
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 50%;
            margin: 0 1.5rem 0 3rem;
        }

        .userinfo-info {
            font-size: 1.2rem;
            color: #b6afd5;

        }
    }

    .myflxe2 {
        position: fixed;
        left: 5.5rem;
        font-size: 1.2rem;
        color: red;
        top: 35.3rem;
    }
}

::v-deep .van-nav-bar .van-icon {
    color: #000;
}

::v-deep .van-button {
    height: 4.5rem;
    width: 32rem;
    border-radius: 1rem;
    margin-bottom: 5rem;
}

::v-deep .van-cell {
    height: 5.5rem;
}

::v-deep .van-field__left-icon {
    color: #8560c7;
}
</style>